<template>
  
  <div>
    <!-- 聊天 -->
    <div class="talk">
        <div class="header">
            聊天
        </div>
        <router-link tag="div" :to="'/saywhat?id='+item.id" class="ltk" v-for="(item,index) in talklists" :key="index">
            <div class="imgs">
                <img :src="item.market" alt="">
            </div>
            <div class="speak">
                <h1>{{item.name}}</h1>
                <p>{{item.talks}}</p>
                <div class="time">
                    {{item.time}}
                </div>
            </div>
        </router-link>
    </div>
    <div class="talkooo"></div>

    <!-- 切换 -->
     <div class="dibu">
        <router-link tag="a" to="/home" class="items">
            <img src="../assets/imgs/白首页.webp" alt="">
            <p>首页</p>
        </router-link>
        <router-link tag="a" to="/video" class="items">
            <img src="../assets/imgs/直播.webp" alt="">
            <p>直播</p>
        </router-link>
        <router-link tag="a" to="/newsele" class="items">
            <img src="../assets/imgs/分类.webp" alt="">
            <p>分类</p>
        </router-link>
        <router-link tag="a" to="/talk" class="items">
            <img src="../assets/imgs/聊天.webp" alt="">
            <p>聊天</p>
        </router-link>
        <router-link tag="a" to="/person" class="items">
            <img src="../assets/imgs/个人中心.webp" alt="">
            <p>个人中心</p>
        </router-link>
    </div>
  </div>
</template>

<script>
import { getapidata } from "../api/newsele";
export default {
    data(){
        return {
            talklists:"",
            tkid:"",
        }
    },
    methods:{
    },
    created(){
        getapidata().then(data=>{
            this.talklists = data.talklists
        })
        
    }
}
</script>

<style>
.talkooo{
    width: 100%;
    height: 70px;
}
.talk .header{
    width: 100%;
    height: 60px;
    background-color: #fff;
    text-align: center;
    line-height: 60px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: #dfdfdf 1px solid;
}
.talk .ltk{
    width: 100%;
    height: 60px;
    display: flex;
    position: relative;
}
.talk .ltk .speak{
    flex: 1;
    width: 20px;
    height: 60px;
    border-bottom: 1px solid #dfdfdf;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.talk .ltk .imgs{
    /* flex: 1; */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 25px;
    margin-top: 5px;
}
.talk .ltk .imgs img{
    width: 100%;
}
.talk .ltk .speak h1{
    font-size: 16px;
    margin-left: 10px;
}
.talk .ltk .speak p{
    font-size: 12px;
    color: #242424;
    margin-left: 10px;
}
.talk .ltk .time{
    position: absolute;
    top: 10px;
    font-size: 12px;
    color: gray;
    right: 10px;
}
</style>